<template>
    <div id="mylist-box">
        
        <img :src="item.productImage" alt="">
        <div style="font-size:15px;margin:10px 0;">{{item.productName}}</div>
        <big style="color:red;">￥ {{item.salePrice}}</big>
        <div class="button">
            <button @click="onClickAdd">加入购物车</button>
        </div>

    </div>
</template>

<script> 
export default {
    props:{
        item:Object 
    },
    methods: {
        // 点击 加入购物车
        onClickAdd(){
            var flag = localStorage.getItem("user");
            if (flag) {
                this.$confirm("确定要将此商品加入购物车, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.$store.commit("cartModule/CLICK_ADD_CART", this.item);
                    this.$message({
                        type: "success",
                        message: "添加成功!",
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "添加失败!",
                    });
                });
            }else{
                this.$message("请先登录，再添加");
            }
        }
    },
}
</script>

<style lang="scss" scoped>
#mylist-box{
    width:23%;
    height:380px;
    border:1px solid lightgrey;
    background-color: #fff;
    margin:5px;
    text-align: left;
    img{
        width:100%;
        height: 65%;
    }
    .button{
        width:100%;
        height:35px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        // background-color: red;
        button{
            width:90%;
            height:100%;
            color:red;
            border:1px solid red;
        }
    }
}
</style>

